<template>
  <div class="">
    <van-nav-bar title="电子健康卡信息" left-text="返回" right-text="更多" left-arrow @click-left="onClickLeft"
      @click-right="onClickRight" />
    <div class="userInfo">
      <div>
        <van-image round width="75px" height="60px" fit="scale-down" position="left"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      </div>
      <div>
        <p>{{ data_user.fullname }} 的电子健康卡</p>
        <p>门诊号： number</p>
      </div>
      <div>
        <van-button icon="friends" type="primary" class="change_user" @click="changeUser">
          切换就诊人
        </van-button>
      </div>
    </div>
    <van-tabs v-model:active="activeName">
      <van-tab title="就诊卡" name="a">
        <van-image src="../../public/images/user_info.png" />
      </van-tab>
      <van-tab title="健康卡" name="b">
        <van-image src="../../public/images/user_info.png" />
      </van-tab>
    </van-tabs>
    <van-divider :style="{ color: '#323232', borderColor: 'gray', padding: '0 16px' }">
      {{ data_user.fullname }}
    </van-divider>
    <table>
      <tr>
        <td>门诊号</td>
        <td>123</td>
      </tr>
      <tr>
        <td>身份证号</td>
        <td>32465464643434313</td>
      </tr>
      <tr>
        <td>电话号码</td>
        <td>{{ data_user._id }}</td>
      </tr>
      <tr>
        <td>住址</td>
        <td>四川省成都市武侯区</td>
      </tr>
      <tr>
        <td>
          <van-button icon="bookmark" type="primary" class="user_btn" @click="toChangeUser">
            修改个人信息
          </van-button>
        </td>
        <td>
          <van-button icon="add-square" type="primary" class="user_btn" @click="bindUser">
            绑定就诊人
          </van-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { Toast } from "vant";
import { ref } from "vue";
import router from "../router/index";
import 'vant/es/toast/style';
// import { QueryReq } from "../hooks/index";
const onClickLeft = () => history.back();
const onClickRight = () => Toast("此模块尚未开发！");
const activeName = ref("a");
let data_users = sessionStorage.getItem("user_data");
let data_user = JSON.parse(data_users);

if (data_user == null) {
  Toast.fail('未登录，请先登录！亲');
  data_user = {
    fullname: '未登录！',
    username: 8888888888888888
  }
} else {
  data_user = data_user.data.info
}

// 转到修改个人信息
const toChangeUser = () => {

  if (data_user.fullname != '未登录！') {
    router.push({ path: "/changeuser" });
  }else{
    Toast.fail('未登录，请先登录！亲');
  }
};

// 切换就诊人
const changeUser = () => {

  if (data_user.fullname != '未登录！') {
    Toast({
      message: "未检测到其他就诊人，请注册添加！",
      position: "top",
    });
  }
  Toast.fail('未登录，请先登录！亲');
};

// 绑定就诊人
const bindUser = () => {

  if (data_user.fullname != '未登录！') {
    function getCurrentUser() {
      let current_user = localStorage.getItem("user_data");
    }
    Toast({
      message: "绑定成功",
      position: "top",
    });
  }
  Toast.fail('未登录，请先登录！亲');

};
</script>

<style lang="less" scoped>
.userInfo {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eef8f0;
  font-family: "华文行楷";
  font-size: 16px;

  .van-button {
    background-color: transparent;
    border: none;
    color: #0192a7;
  }
}

.van-tabs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.van-divider {
  font-family: "华文行楷";
  font-size: 18px;
}

table {
  width: 100%;
  font-size: 15px;
  margin-top: 50px;
  font-family: "华文行楷";

  tr {
    width: 90%;
    padding-left: 15px;
    padding-right: 10px;
    line-height: 45px;
    display: flex;
    justify-content: space-between;
  }

  .user_btn {
    width: 150px;
    border-radius: 20px;
    margin-top: 30px;
    background-color: white;
    color: #05a9a8;
    border: 1px solid #05a9a8;
  }
}
</style>
